<template>
	<view class="container">
		<TopBtn :title="'投诉建议 '"></TopBtn>
		<view class="info">
			<uni-forms ref="baseForm" :label-width="120" :rules="rules" :modelValue="baseFormData">
				<uni-forms-item label="类型" required name="feedbackType">
					<uni-data-checkbox v-model="baseFormData.feedbackType" :localdata="type" />
				</uni-forms-item>
				<uni-forms-item label="举报内容" required name="describe">
				</uni-forms-item>
				<textArea v-model="baseFormData.describe" class="mb_30" :maxNum="100"></textArea>
				<uni-forms-item label="附件">
				</uni-forms-item>
				<view class="text">
					注意：每次只能选择一张，最多上传6张
				</view>
				<uni-file-picker class="mb_30 mt_30" :value="filePathsList" :auto-upload="false" file-mediatype="image"
					mode="grid" file-extname="png,jpg,jpeg" :limit="6" @select="select" @delete="handleDelete"
					@success="success" />
				<uni-forms-item label="联系方式">
					<uni-easyinput v-model="baseFormData.mobile" :clearable="false" placeholder="请输入您的联系方式" />
				</uni-forms-item>
			</uni-forms>
			<view class="btn" @click="submit()">
				提交反馈
			</view>
		</view>
	</view>
</template>

<script>
	import {
		createComplainProposal,
		pharmacistCreateComplainProposal
	} from '@/api/user'
	import {
		CONFIG
	} from '@/config/app'
	export default {
		data() {
			return {
				rules: {
					feedbackType: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					describe: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
				},
				baseFormData: {
					feedbackType: 0
				},
				type: [{
					text: '投诉',
					value: 0
				}, {
					text: '建议',
					value: 1
				}],
				filePathsList: [],
				Url: CONFIG.HTTP_REQUEST_URL + 'app-api/infra/file/upload',
				role: uni.getStorageSync('role')
			};
		},
		methods: {
			submit() {
				this.$refs.baseForm.validate().then(res => {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					if (this.role == 1) {
						createComplainProposal(this.baseFormData).then(res => {
							setTimeout(() => {
								uni.hideLoading()
								//需要定时执行的代码
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}, 200)
						})
					} else {
						pharmacistCreateComplainProposal(this.baseFormData).then(res => {
							setTimeout(() => {
								uni.hideLoading()
								//需要定时执行的代码
								uni.navigateBack({
									delta: 1, //返回层数，2则上上页
								})
							}, 200)
						})
					}

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			handleDelete(err) { // 删除图片
				const num = this.filePathsList.findIndex(v => v.url === err.tempFilePath);
				this.filePathsList.splice(num, 1);
			},
			select(e) {
				let that = this
				uni.showLoading({
					title: "上传中"
				});
				const tempFilePaths = e.tempFilePaths;
				for (var i = 0; i < tempFilePaths.length; i++) {
					const tempFile = e.tempFiles[i];
					uni.uploadFile({
						url: this.Url,
						header: {
							'token': uni.getStorageSync('token'),
						},
						filePath: tempFilePaths[i],
						name: 'file',
						success: (uploadFileRes) => {
							uni.hideLoading();
							let data = {}
							if (JSON.parse(uploadFileRes.data).code == 0) {
								data.url = JSON.parse(uploadFileRes.data).data
								this.filePathsList.push(data)
							} else {
								data.url = JSON.parse(uploadFileRes.data).msg
								this.filePathsList.push(data)
								this.filePathsList.pop()
								uni.showToast({
									title: JSON.parse(uploadFileRes.data).msg,
									icon: "none",
									duration: 2000
								});
							}
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast("上传失败，请联系开发！")
						},
						complete: function() {
							uni.hideLoading();
						}
					});
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.btn {
		width: 649rpx;
		height: 100rpx;
		background: #3B6CFE;
		border-radius: 50rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
		margin: 200rpx auto 0;
	}

	.container {
		padding-top: 158rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		min-height: 100vh;

		.info {
			flex: 1;
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 52rpx 52rpx 0 0;
			padding: 40rpx 50rpx;
			box-sizing: border-box;

			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #666666
			}

			/deep/.is-input-border {
				border: none;
			}

			/deep/.uni-easyinput__content-input {
				text-align: right;
				padding-right: 10rpx;
			}

			/deep/ .uni-forms-item__label {
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			/deep/ .uni-forms-item {
				margin-bottom: 0rpx;
			}

			/deep/.uni-forms-item__content {
				display: flex;
				align-items: center;
				justify-content: right;
			}

			/deep/.checklist-group {
				justify-content: right;
			}
		}
	}
</style>